<section class="checkout-container" [ngSwitch]="result">
  <section class="checkout-success" *ngSwitchCase="'success'">
    <div class="material-symbols-outlined" aria-hidden="true">done</div>
    <h1>Thank you for your booking!</h1>
    <p>You will receive a confirmation email with all the details of your reservation.</p>
    <a mat-flat-button color="primary" routerLink="/me/reservations">Go to your reservations</a>
  </section>

  <section class="checkout-cancel" *ngSwitchCase="'cancel'">
    <div class="material-symbols-outlined" aria-hidden="true">close</div>
    <h1>Booking cancelled</h1>
    <p>You cancelled the reservation, your card was not charged.</p>
    <a mat-flat-button color="primary" routerLink="/home">Go back to listings</a>
  </section>

  <section class="checkout-error" *ngSwitchDefault>
    <div class="material-symbols-outlined" aria-hidden="true">sentiment_dissatisfied</div>
    <h1>Uh oh!</h1>
    <p>Something went wrong with your reservation. Please try again later.</p>
    <a mat-flat-button color="primary" routerLink="/home">Go back to listings</a>
  </section>
</section>
